<template>
	<view>
		<TabBar :activeIndex="1"></TabBar>
		<view class="right-content">
			<view class="tit">
				<u-icon class="back" size="24" name="/static/img/arrow-left.svg" @click="goBack"></u-icon>
				{{info.meetingName}}
			</view>
			<view class="tabs">
				<u-tabs :list="tabs" @click="switchtTab"
				lineWidth="0"
				:itemStyle="itemStyle"
				:activeStyle="activeStyle"
				:inactiveStyle="inactiveStyle"
				>
				</u-tabs>
			</view>
			
			<!-- 基本信息 -->
			<view v-if="this.active == 0" class="basicInformation">
				<view class="name">
					<view>会议时间：</view>
					<view>会议地点：</view>
					<view>召集人：</view>
					<view>主持人：</view>
					<view>会议召开方式：</view>
					<view>审议事项：</view>
				</view>
				<view class="value">
					<view>{{info.meetingStartTime}}~{{info.meetingFinishTime}}</view>
					<view>{{info.meetingPlace}}</view>
					<view>{{info.meetingConvenor}}</view>
					<view>{{info.meetingCompere}}</view>
					<view>{{info.meetingConvoke}}</view>
					<view>{{info.meetingReviewItems}}</view>
				</view>
				<view class="operation">
					<u-button type="primary" size="large" text="签到"  @click="autograph"></u-button>
					<u-modal :show="showAutograph" width="900px" title="签到"
							 :show-cancel-button='true' @confirm="confirm" @cancel="cancel">
						<view class="x-modal">
							<view class="x-m-title">
								<text>请在框内进行签名</text>
								<view class="xm-t-clear" @click="clear">
									<image src="../../static/clean.png" mode=""></image>
									<text>清除</text>
								</view>
							</view>
							<view class="x-m-con">
								<!-- 重点在此，画布 -->
								<canvas class="mycanvas" canvas-id="mycanvas" @touchstart="touchstart" @touchmove="touchmove" @touchend="touchend"></canvas>
							</view>
						</view>
					</u-modal>
				</view>
			</view>
			
			<!-- 议题材料 -->
			<view v-if="this.active == 1" class="content">
				<scroll-view scroll-y class="page" lower-threshold='50' @scrolltolower="scrolltolower">
					<agenda-list @agendaItemClick="goVoteResult" @openAgenda="openAgenda" :agendaList="agendaList"></agenda-list>
				</scroll-view>
				<view v-show="isLoadMore">  
					<uni-load-more :status="loadStatus"></uni-load-more>
				</view>
				<u-popup :show="showDetail" mode="right" @close="closeAgenda" @open="openAgenda">
					<view class="tit">
						<u-icon class="back" size="24" name="/static/img/u278.svg" @click="closeAgenda"></u-icon>
					</view>
					<view class="basicInformation">
						<view class="agendaName">
							<view>类型1：</view>
							<view>类型2：</view>
							<view></view>
							<view>党组织前置研究讨论：</view>
							<view>沟通会：</view>
							<view>专门委员会：</view>
							<view>金额（亿元）：</view>
							<view>专项调研：</view>
							<view>投票情况：</view>
						</view>
						<view class="agendaValue">
							<u-checkbox-group 
								v-model="selectedAgenda.agendaTypeOne"
								placement="row">
								<u-checkbox
								  :customStyle="{ paddingLeft: '25px',transform: 'scale(1.2)',marginTop:'2px',height:'30px'}"
								  v-for="(item, index) in agendaTypeOneList"
								  :key="index"
								  :label="item.name"
								  :name="item.name"
								  :disabled="item.disabled"
								  shape="square"
								>
								</u-checkbox>
							</u-checkbox-group>
							<u-checkbox-group
								v-model="selectedAgenda.agendaTypeTwo"
								placement="row">
								<u-checkbox 
								  :customStyle="{ paddingLeft: '25px',transform: 'scale(1.2)',marginTop:'1px',height:'30px'}"
								  v-for="(item, index) in agendaTypeTwoList1"
								  :key="index"
								  :label="item.name"
								  :name="item.name"
								  :disabled="item.disabled"
								  shape="square"
								>
								</u-checkbox>
							</u-checkbox-group>
							<u-checkbox-group 
								v-model="selectedAgenda.agendaTypeTwo"
								placement="row">
								<u-checkbox
								  :customStyle="{ paddingLeft: '25px',transform: 'scale(1.2)',marginTop:'0px',height:'30px'}"
								  v-for="(item, index) in agendaTypeTwoList2"
								  :key="index"
								  :label="item.name"
								  :name="item.name"
								  :disabled="item.disabled"
								  shape="square"
								>
								</u-checkbox>
							</u-checkbox-group>
							<u-radio-group
							   v-model="selectedAgenda.agendaParty"
							   placement="row">
								<u-radio
									:customStyle="{ paddingLeft: '25px',transform: 'scale(1.2)',marginTop:'0px',height:'30px'}"
									v-for="(item, index) in commonList"
									:key="index"
									:label="item.name"
									:name="item.name"
									:disabled="item.disabled"
									shape="square"
								>
								</u-radio>
							</u-radio-group>
							<u-radio-group
							   v-model="selectedAgenda.agendaCommunication"
							   placement="row">
								<u-radio
									:customStyle="{ paddingLeft: '25px',transform: 'scale(1.2)',marginTop:'0px',height:'30px'}"
									v-for="(item, index) in commonList"
									:key="index"
									:label="item.name"
									:name="item.name"
									:disabled="item.disabled"
									shape="square"
								>
								</u-radio>
							</u-radio-group>
							<u-radio-group
							   v-model="selectedAgenda.agendaCouncil"
							   placement="row">
								<u-radio
									:customStyle="{ paddingLeft: '25px',transform: 'scale(1.2)',marginTop:'0px',height:'30px'}"
									v-for="(item, index) in commonList"
									:key="index"
									:label="item.name"
									:name="item.name"
									:disabled="item.disabled"
									shape="square"
								>
								</u-radio>
							</u-radio-group>
							<view id="agendaCount"><text>{{selectedAgenda.agendaCount}}</text></view>
							<u-radio-group
							   v-model="selectedAgenda.agendaSurvey"
							   placement="row">
								<u-radio
									:customStyle="{ paddingLeft: '25px',transform: 'scale(1.2)',marginTop:'0px',height:'30px'}"
									v-for="(item, index) in commonList"
									:key="index"
									:label="item.name"
									:name="item.name"
									:disabled="item.disabled"
									shape="square"
								>
								</u-radio>
							</u-radio-group>
							<u-radio-group
							   v-model="selectedAgenda.agendaVote"
							   placement="row">
								<u-radio
									:customStyle="{ paddingLeft: '25px',transform: 'scale(1.2)',marginTop:'0px',height:'30px'}"
									v-for="(item, index) in agendaVoteList"
									:key="index"
									:label="item.name"
									:name="item.name"
									:disabled="item.disabled"
									shape="square"
								>
								</u-radio>
							</u-radio-group>
						</view>
					</view>
				</u-popup>
			</view>
			
			<!-- 表决汇总 -->
			<view v-if="this.active == 2" class="voteSummary">
				<uni-table border stripe emptyText="暂无更多数据" ref="table" :loading="loading">
					<!-- 表头行 -->
					<uni-tr>
						<uni-th align="center">议题名称</uni-th>
						<uni-th align="center">投票人数</uni-th>
						<uni-th align="center">同意</uni-th>
						<uni-th align="center">反对</uni-th>
						<uni-th align="center">弃权</uni-th>
						<uni-th align="center">结果</uni-th>
					</uni-tr>
					<!-- 表格数据行 -->
					<uni-tr v-for="(item, index) in voteSum" :key="index">
						<uni-td>{{item.meetingReviewItems}}</uni-td>
						<uni-td align="center">{{item.voteNum}}</uni-td>
						<uni-td align="center">{{item.agreeNum}}</uni-td>
						<uni-td align="center">{{item.opposeNum}}</uni-td>
						<uni-td align="center">{{item.waiverNum}}</uni-td>
						<uni-td align="center">{{item.result}}</uni-td>
					</uni-tr>
				</uni-table>
				<uni-pagination show-icon :page-size="pageSize" :current="pageCurrent" :total="total" @change="change" />
			</view>
			
			<!-- 会议决议 -->
			<view v-if="this.active == 3" class="conferenceResolution">
				<view class="head">会议决议（草案）</view>
				<view class="attachmentDraft">
					<text @click="openDraft(`http://192.168.250.14/vue/index-mo.html?url=http://192.168.250.14/api/mobileoffice/mobile/opendoc`)">第x界董事会第x次会议决议（草案）</text>
				</view>
				<view class="head">会议决议</view>
				<view class="attachment">
					<text @click="openAttach(`http://192.168.250.14/vue/index-mo.html?url=http://192.168.250.14/api/mobileoffice/mobile/opendoc`)">第x界董事会第x次会议决议</text>
				</view>
			</view>
		</view>
		
		
	</view>
	
</template>

<script>
	import agendaList from '../../components/agenda-list/agenda-list.vue'
	export default {
		components: {"agenda-list":agendaList},
		data() {
			return {
				itemStyle: {
				  flex: 1,
				  width: "540rpx",
				  height: "50px",
				  lineHeight: "50px",
				  fontSize: "18px",
				  padding: "0",
				  border: "1px solid rgb(213,213,213)",
				},
				inactiveStyle: {
				  width: "100%",
				  height: "100%",
				  textAlign: "center",
				  fontSize: "18px",
				},
				activeStyle: {
				  backgroundColor: "rgb(167,210,249)",
				  width: "100%",
				  height: "100%",
				  textAlign: "center",
				  fontSize: "18px",
				}, 	
				showAutograph: false, //签名弹框是否显示
				ctx: '', //绘图图像
				points: [], //路径点集合 
				signature: '',
				
				// 类型1数据
				agendaTypeOneList: [{
					  name: '审议类',
					  disabled: true
					},
					{
					  name: '报告类',
					  disabled: true
					},
					{
					  name: '传达学习类',
					  disabled: true
					}
				],
				// 类型2数据
				agendaTypeTwoList1: [{
					  name: '战略类',
					  disabled: true
					},
					{
					  name: '投资类',
					  disabled: true
					},
					{
					  name: '风险类',
					  disabled: true
					}
				],
				agendaTypeTwoList2: [
					{
					  name: '改革类',
					  disabled: true
					},
					{
					  name: '人事类',
					  disabled: true
					},
					{
					  name: '其他',
					  disabled: true
					},
				],
				// 是与否单选框
				commonList: [{
					  name: '是',
					  disabled: true
					},
					{
					  name: '否',
					  disabled: true
					}
				],
				// 投票情况数据
				agendaVoteList: [{
					name: '同意',
					  disabled: true
					},
					{
					  name: '反对',
					  disabled: true
					},
					{
					  name: '弃权',
					  disabled: true
					}
				],
				
				// 议题材料当前页
				agendaPage:1,
				// 议题材料每页数据量
				agendaPagesize:2,
				loadStatus:'loading',  //加载样式：more-加载前样式，loading-加载中样式，nomore-没有数据样式
				isLoadMore:false,  //是否加载中
				agendaList:[],
				showDetail: false,
				selectedAgenda:{},
				
				// 表决汇总每页数据量
				pageSize: 8,
				// 表决汇总当前页
				pageCurrent: 1,
				// 表决汇总数据总量
				total: 0,
				loading: false,
				active: 0,
				info: {},
				voteSum:[],
				tabs: [{
					name: '基本信息',
				}, {
					name: '议题材料',
				}, {
					name: '表决汇总'
				}, {
					name: '会议决议'
				}],
			}
		},
		methods: {
			/* 获取基本信息 */
			async getDetailInfo () {
				// const res = await request({
				// 	url: '/api/meeting/getinfo/'+this.id
				// })
				// this.info = res.data.message[0]
				this.info = {
					id:1,
					meetingName:"2022年董事会第一次会议",
					meetingPlace:"广州",
					meetingConvenor:"李四",
					meetingCompere:"张三",
					meetingConvoke:"现场会议",
					meetingReviewItems:"关于xxx的议题",
					meetingStartTime:"2022-02-12 10:23:25",
					meetingFinishTime:"2022-02-12 12:23:25",
					meetingType:"临时会议"
				}
			},
			//创建并显示签名画布
			autograph() {
				this.showAutograph = true;
				console.log("this.showAutograph",this.showAutograph)
				//创建绘图对象
				this.ctx = uni.createCanvasContext("mycanvas", this);
				//设置画笔样式
				this.ctx.lineWidth = 4;
				this.ctx.lineCap = "round"
				this.ctx.lineJoin = "round"
			},
			//触摸开始，获取到起点
			touchstart(e) {
				let startX = e.changedTouches[0].x;
				let startY = e.changedTouches[0].y;
				let startPoint = {
					X: startX,
					Y: startY
				};
				this.points.push(startPoint);
				//每次触摸开始，开启新的路径
				this.ctx.beginPath();
			},
			//触摸移动，获取到路径点
			touchmove(e) {
				let moveX = e.changedTouches[0].x;
				let moveY = e.changedTouches[0].y;
				let movePoint = {
					X: moveX,
					Y: moveY
				};
				this.points.push(movePoint); //存点
				let len = this.points.length;
				if (len >= 2) {
					this.draw(); //绘制路径
				}
			},
			// 触摸结束，将未绘制的点清空防止对后续路径产生干扰
			touchend() {
				this.points = [];
			},
			/* ***********************************************
			#   绘制笔迹
			#	1.为保证笔迹实时显示，必须在移动的同时绘制笔迹
			#	2.为保证笔迹连续，每次从路径集合中区两个点作为起点（moveTo）和终点(lineTo)
			#	3.将上一次的终点作为下一次绘制的起点（即清除第一个点）
			************************************************ */
			draw() {
				let point1 = this.points[0]
				let point2 = this.points[1]
				this.points.shift()
				this.ctx.moveTo(point1.X, point1.Y)
				this.ctx.lineTo(point2.X, point2.Y)
				this.ctx.stroke()
				this.ctx.draw(true)
			},
			//清空画布
			clear() {
				let that = this;
				uni.getSystemInfo({
					success: function(res) {
						let canvasw = res.windowWidth;
						let canvash = res.windowHeight;
						that.ctx.clearRect(0, 0, canvasw, canvash);
						that.ctx.draw(true);
					},
				})
			},
			//关闭并清空画布
			cancel() {
				this.showAutograph = false;
				this.clear();
			},
			//完成绘画并保存到本地
			confirm() {
				let that = this;
				uni.canvasToTempFilePath({
					canvasId: 'mycanvas',
					success: function(res) {
						console.log(res.tempFilePath) 
						//图片格式为base64，如果不是可上传七牛云，之后请求签名接口即可
						// that.$api.api.h5.sign({
						// 	"merSignName": res.tempFilePath,
						// 	"workId": that.workId
						// }).then(res=>{
						// 	if(res.result.code=='000000') {
								//走到这里就签名成功了
								uni.redirectTo({
									url:'/pages/meeting-detail/meeting-detail'
								})
						// 	}else{
						// 		that.$u.toast(res.result.message)
						// 	}
						// })
					}
				})
			},
			
			/* 获取表决汇总 */
			async getVoteSum () {
				this.loading = true;
				//获取会议表决汇总
				// const res = await request({
				// 	url: '/api/meeting/getVoteSum/'+this.id+'/'+this.pageCurrent+'/'+this.pageSize
				// }).then(response => {
				// 	this.voteSum = response.data.pageModel.records
				// 	this.total = response.data.pageModel.total
				// })
				this.voteSum = [];
				for (let i = 0; i < 6; i++) {
					var str=[];
					var Chars='0123456789abcdefghijklmnopqrstuvwxyz';
					for(var j=0;j<36;j++){
					str[j]=Chars.substr(Math.floor(Math.random()*16),1)
					}
					str[0]=str[8]=str[13]=str[18]=str[23]='-';
					let UUID =  "tabName"+str.join("");
					this.voteSum.push({
						id:UUID,
						meetingReviewItems:"关于xxx的议题"+i,
						voteNum:"9",
						agreeNum:"8",
						opposeNum:"1",
						waiverNum:"0",
						result:"通过"
					})
				}
				this.total = this.voteSum.length;
				this.loading = false
			},
			scrolltolower() {
				console.log("scrolltolower")
			    //上拉触底函数
			    if (!this.isLoadMore) {
				  //此处判断，上锁，防止重复请求
				  this.isLoadMore = true;
				  this.agendaPage += 1;
				  this.getAgendaList();
				}
			},
			/* 获取议题材料 */
			async getAgendaList() {
				// const res = await request({
				// 	url: '/api/getAgendaList?page='+this.agendaPage+'&pagesize='+this.agendaPagesize
				// }).then(response => {
				//   if(res.data.code==200){
				// 	if(res.data.message){
				// 		  this.agendaList=this.agendaList.concat(res.data.message)
				// 		  if(res.data.message.length<this.agendaPagesize){  //判断接口返回数据量小于请求数据量，则表示此为最后一页
				// 				this.isLoadMore=true                                             
				// 				this.loadStatus='nomore'
				// 		  }else{
				// 				this.isLoadMore=false
				// 		  }
				// 	}else{
				// 		  this.isLoadMore=true
				// 		  this.loadStatus='nomore'
				// 	}
				//   }else{  //接口请求失败的处理
				// 		uni.showToast({title:res.data.msg,icon:'none'})
				// 		this.isLoadMore=false
				// 		if(this.agendaPage>1){
				// 			this.agendaPage=1
				// 		}
				//   }
				// }).catch(error => {
				//   uni.showToast({title: '服务器开小差了，请您稍后再试！',icon:'none'})
				//   this.isLoadMore=false
				//   if(this.agendaPage>1){
				// 		this.agendaPage=1
				//   }
				// })
			
				for (let i = 0; i < 6; i++) {
					var str=[];
					var Chars='0123456789abcdefghijklmnopqrstuvwxyz';
					for(var j=0;j<36;j++){
					str[j]=Chars.substr(Math.floor(Math.random()*16),1)
					}
					str[0]=str[8]=str[13]=str[18]=str[23]='-';
					let UUID =  "tabName"+str.join("");
					this.agendaList.push({
						id:UUID,
						agendaName:"关于xxx的议题"+i,
						agendaRule:"普通决议",
						agendaTypeOne:["审议类","报告类"],
						agendaTypeTwo:["战略类","改革类"],
						agendaParty:"是",
						agendaCommunication:"是",
						agendaCouncil:"是",
						agendaCount:"34.87",
						agendaSurvey:"是",
						agendaVote:"同意",
						agendaAttList:[{name:"董事会决策材料清单1"},{name:"董事会决策材料清单2"}]
					})
				}
				this.isLoadMore=false;
			},
			openAgenda(item) {
				console.log("item",item);
				this.selectedAgenda = item;
				this.showDetail = true
			},
			closeAgenda() {
				this.showDetail = false
			},
			goVoteResult(id){
				// 导航到某议题的表决结果
				uni.navigateTo({
					url: '/pages/meeting-vote-result/meeting-vote-result?id='+id
				})
			},
			/* 切换不同页签 */
			switchtTab(item) {
				this.active = item.index;
				console.log('item', item);
				if(this.active == 1){
					this.getAgendaList ()
					console.log('AgendaList', this.agendaList);
				}else if(this.active == 2){
					this.getVoteSum ()
					console.log('voteSum', this.voteSum);
				}
			},
			goBack() {
				uni.navigateBack({
					delta: 1
				})
			},
			// 分页触发
			change(e) {
				console.log("页码",e.current)
				this.page = e.current
				this.$refs.table.clearSelection()
				this.getVoteSum()
			},
			openDraft(url2){
				// http://192.168.31.14:8110/getFile?fileName=test.pdf
				let url = encodeURIComponent("http://192.168.31.14:8110/test.pdf");
				uni.navigateTo({
					url: `/pages/meeting-detail/meeting-draf-filePreview?link=${url}&id=`+this.id,
				});
			},
			openAttach(url2){
				// http://101.35.133.21:9009/test.pdf
				let url = encodeURIComponent("http://101.35.133.21:9009/test.pdf");
				uni.navigateTo({
				   url: `/pages/filePreview?link=${url}&id=`+this.id,
				});
			}
		},
		onLoad (options) {
			this.id = options.id
			this.getDetailInfo()
		},
		
	}
</script>

<style lang="scss">
	@import "@/static/css/_px2vw.scss";
	.basicInformation{
		display: flex;
		.name{
			text-align:right;
			font-weight: bold;
			font-size: vw(18);
			width: 35%;
			view{
				margin-top: vw(25);
			}
		}
		.value{
			width: 50%;
			display:gird;
			font-size: vw(14);
			view{
				margin-top: vw(30);
			}
		}
		.agendaName{
			width: 30vw;
			text-align:right;
			font-weight: bold;
			font-size: vw(18);
			view{
				height:60px;
				margin-top: vw(30);
			}
		}
		.agendaValue{
			width: 40vw;
			display:gird;
			font-size: vw(14);
			view{
				margin-top: vw(30);
			}
			#agendaCount{
				height:60px;
				font-size: vw(20);
				padding-left: vw(25);
				margin-top: vw(28);
				font-weight: 700;
				color: #D9001B;;
			}
		}
		.operation{
			width: 7%;
			display:gird;
			uni-button{
				height: vw(30);
				margin-top: vw(23);
				/deep/ uni-text{
					font-size:vw(13) !important;
				}
			}
			uni-view{
				/deep/ uni-text{
					font-size:vw(20) !important;
				}
				/deep/ .u-modal__button-group__wrapper{
					height: vw(40);
				}
			}
		}
	}
	.tit{
		width: 100%;
		height: vw(50);
		text-align:center;
		background-color:rgb(64,158,255);
		line-height: vw(50);
		font-size:vw(20);
		color:#FFFFFF;
		font-family:'Arial Negreta', 'Arial Normal', 'Arial', sans-serif;
		font-weight:700;
		font-style:normal;
		.back{
			height: vw(50);
			line-height: vw(50);
			margin-left: vw(15);
			float:left;
		}
	}
	.tabs{
		height: vw(50);
		&+.content{
			.page {
			  height: 92.2vh;
			}
		}
		/deep/ .u-tabs__wrapper__nav__item{
			width: 20.8vw !important;
		}
	}
	.voteSummary{
		margin: vw(25) vw(50);
		.uni-table-th{
			font-size: vw(18);
		}
		.uni-table-td{
			font-size: vw(18);
			padding: vw(10);
		}
	}
	
	.uni-pagination{
		margin: vw(15);
		/deep/ .uni-pagination__total{
			font-size: vw(18);
			line-height: vw(30);
			height: vw(30);
			min-width: vw(30);
		}
		/deep/ .uni-pagination__num{
			font-size: vw(18);
			line-height: vw(30);
			height: vw(30);
			min-width: vw(30);
		}
		/deep/ .uni-pagination__num-current{
			font-size: vw(18);
			line-height: vw(30);
			height: vw(30);
			min-width: vw(30);
		}
		/deep/ .uni-pagination__num-tag{
			font-size: vw(18);
			line-height: vw(30);
			height: vw(30);
			min-width: vw(30);
		}
		/deep/ .uni-pagination__btn{
			font-size: vw(18);
			line-height: vw(30);
			height: vw(30);
		}
	}
	
	@mixin playcenter {
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.x-modal {
		width: 100%;
		
		.x-m-title {
			width: 100%;
			height: vw(45);
			padding: 0 vw(19) 0 vw(16);
			box-sizing: border-box;
			font-size: vw(20);
			color: #333333;
			border-bottom: vw(1) dashed #999;
			@include playcenter;
			justify-content: space-between;
			.xm-t-clear {
				font-size: vw(18);
				color: #341DB7;
				@include playcenter;
				image {
					width: vw(20);
					height: vw(20);
					display: block;
					margin-right: vw(4);
				}
			}
		}
		.x-m-con {
			height: vw(360);
			width: 100%;
			padding: 0 vw(16) vw(9);
			margin-top: vw(3);
			box-sizing: border-box;
			.mycanvas{
				width: 100%;
				height: 100%;
			}
		}
	}
	.conferenceResolution{
		.head{
			margin-top: vw(50);
			margin-left: vw(70);
			width: vw(200);
			height: vw(50);
			line-height: vw(50);
			text-align: center;
			background-color: #82B6E6;
			font-family:'Arial Negreta', 'Arial Normal', 'Arial', sans-serif;
			font-weight:700;
			font-style:normal;
			font-size: vw(18);
		}
		.attachmentDraft{
			margin-top: vw(50);
			padding-bottom: vw(50);
			padding-left: vw(150);
			font-size: vw(18);
			border-bottom:solid #DDDDDD vw(1);
		}
		.attachment{
			margin-top: vw(50);
			padding-bottom: vw(50);
			padding-left: vw(150);
			font-size: vw(18);
		}
		
	}
</style>
